<template>
  <div class="mapPage">
    <div ref="allmap"></div>
  </div>
</template>

<script>
  export default {
    name: "mapPage",
    mounted() {
      let that=this;
      this.$nextTick(() => {
        this._handleResize();

        // 百度地图API功能
        let map = new BMap.Map(this.$refs.allmap);    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
          mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
          ]
        }));
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.addEventListener("click", function (e) {
          // prompt("鼠标单击地方的经纬度为：",e.point.lng + "," + e.point.lat);
          // that.$store.state.coordinate = e.point.lng + "," + e.point.lat;
          let coordinate=e.point.lng + "," + e.point.lat;
          that.$store.commit( 'setCoordinate' ,(coordinate) );
          map.clearOverlays();
          let marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));  // 创建标注
          map.addOverlay(marker);              // 将标注添加到地图中
          // that.$router.push({ path: '/tabs' });
          let geoc = new BMap.Geocoder();
          let pt = e.point;
          geoc.getLocation(pt, function (rs) {
            let addComp = rs.addressComponents;
            alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
            let address=addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            that.$store.commit( 'setAddress' ,(address) );
          });
        });
      });

      window.addEventListener('resize', this._handleResize)
    },
    methods: {
      _handleResize() {
        this.$refs.allmap.style.height = window.innerHeight -100 + 'px';
      }
    }
  }
</script>

<style scoped>
  .mapPage, #allmap {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0;
  }
</style>
